<template>
  <el-card>
    <div class="dashboard-container">
      <div class="app-container">
        <!-- 靠右的按钮 -->
        <div class="right_btn">
          <i class="el-icon-edit" />
          <span type="primary" size="small" @click="addMenuFn(1,'0')">添加菜单</span>
        </div>
        <!-- 表格 -->
        <el-table row-key="id" default-expand-all border :data="permissionList">
          <el-table-column prop="name" align="center" label="名称" />
          <el-table-column prop="code" align="center" label="标识" />
          <el-table-column prop="description" align="center" label="描述" />
          <el-table-column align="center" label="操作">
            <template slot-scope="{row}">
              <el-button v-if="row.type===1" type="text" @click="addPermission(2,row.id)">添加</el-button>
              <el-button type="text" @click="editPermission(row.id)">编辑</el-button>
              <el-button type="text" @click="delPermission(row.id)">删除</el-button>
            </template>
          </el-table-column>

        </el-table>
      </div>
    </div>
    <permissionDialog ref="permissionDialog" @updatePer="getPermissionList" />
  </el-card>

</template>

<script>
import { listToTreeData } from '@/utils'
import permissionDialog from './components/permissionDialog.vue'
import { getPermissions, delPermission } from '@/api/permission'
export default {
  components: { permissionDialog },
  data() {
    return {
      permissionList: []
    }
  },
  async created() {
    await this.getPermissionList()
  },
  methods: {
    //   删除权限
    async delPermission(id) {
      try {
        await this.$confirm('您确定要删除吗？')
        await delPermission(id)
        this.$message({
          message: '删除成功',
          type: 'success'
        })
        await this.getPermissionList()
      } catch (error) {
        error
      }
    },
    // 添加菜单
    addMenuFn(type, id) {
      this.$refs.permissionDialog.title = '添加菜单'
      this.$refs.permissionDialog.type = type
      this.$refs.permissionDialog.pid = id
      this.$refs.permissionDialog.isShowDialog = true
    },
    //  添加权限
    addPermission(type, id) {
      this.$refs.permissionDialog.title = '添加权限'
      this.$refs.permissionDialog.permissionList.pid = id
      this.$refs.permissionDialog.permissionList.type = type
      this.$refs.permissionDialog.isShowDialog = true
    },
    // 编辑权限
    editPermission(id) {
    //   console.log(id)
      this.$refs.permissionDialog.title = '编辑权限'
      this.$refs.permissionDialog.isShowDialog = true
      this.$refs.permissionDialog.getPermission(id)
    },
    // 获取数据
    async getPermissionList() {
      this.permissionList = listToTreeData(await getPermissions(), '0')
    }
  }
}
</script>
<style lang="scss" scoped>
.el-card{
    margin: 20px;
    .right_btn{
        float: right;
        color: #fff;
        padding: 11px;
        margin-bottom: 20px;
        border-radius: 5px;
        background-color: #409EFF;
        i{
            margin-right: 5px;
        }
    }
}

</style>
